﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}
@section styles{
}

<!-- demo root element -->
<div id="app">
    <div class="box box-primary">
        <div class="box-header">
            <ol class="breadcrumb" style="padding:0px;margin:1px;">
                <li><a href="/Member/Index"><i class="fa fa-dashboard"></i>会员管理</a></li>
            </ol>
        </div>
        <div class="box-body">
            <div id="toolbar" class="sections-search">
                <el-row v-bind:gutter="20">
                    <el-col v-bind:span="4">
                        <el-input v-model="table.args.phone" placeholder="电话" clearable></el-input>
                    </el-col>
                    <el-col v-bind:span="4">
                        <el-input v-model="table.args.realName" placeholder="真实姓名" clearable></el-input>
                    </el-col>
                </el-row>
                <el-row class="row-bottom">
                    <el-col>
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-primary btn-flat" v-on:click="loadData()">查 询</button>
                            @*<a class="btn btn-warning btn-flat" href="/Member/Create">新 增</a>*@
                            <button type="button" class="btn btn-warning btn-flat" v-on:click="create">新 增</button>
                            @*<el-button type="warning" class="btn btn-flat" v-on:click="add()">新增</el-button>*@
                        </span>
                    </el-col>
                </el-row>
            </div>
            <div id="table-data">
                <el-row>
                    <el-col>
                        <el-table v-bind:data="table.rows" v-bind:height="table.height" border v-on:selection-change="onSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column type="index"></el-table-column>
                            <el-table-column prop="Id" label="会员Id" width="70"></el-table-column>
                            <el-table-column prop="NickName" label="昵称" ></el-table-column>
                            <el-table-column prop="RealName" label="真实姓名" ></el-table-column>
                            <el-table-column prop="Phone" label="电话"></el-table-column>
                            <el-table-column prop="SecondPhone" label="第二电话"></el-table-column>
                            <el-table-column prop="StatusName" label="状态"></el-table-column>
                            <el-table-column prop="LevelName" label="等级"></el-table-column>
                            <el-table-column prop="CreatedOn" label="创建时间" v-bind:formatter="dateCellFormatter"></el-table-column>
                            <el-table-column label="操作" width="200">
                                <template slot-scope="scope" fixd="right">
                                    <el-button-group>
                                        <el-button v-on:click="addTopMember(scope.row)" size="small" type="primary">升级顶级分销</el-button>
                                        <el-button v-on:click="edit(scope.row)" size="small" type="success">编辑</el-button>
                                        @*<el-button v-on:click="deleteRow(scope.row)" v-if="scope.row.Status!=2" size="small" type="danger">删除</el-button>*@
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination v-bind:current-page="table.page.pageIndex"
                                       v-bind:page-size="table.page.pageSize"
                                       v-bind:total="table.page.total"
                                       v-bind:layout="table.page.layout"
                                       v-on:size-change="onPageSizeChange"
                                       v-on:current-change="onPageChange">
                        </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
    <!-- /.box-body -->
    <el-dialog title="会员维护"
               v-bind:visible.sync="form.dialogVisible"
               width="50%"
               @*v-bind:before-close="save"*@>
        <el-form v-bind:model="form" status-icon v-bind:rules="formRule" ref="form" label-width="100px">
            <el-form-item label="姓名" prop="realName">
                <el-input type="text" v-model="form.realName" placeholder="姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input type="text" v-model="form.phone" placeholder="电话" clearable></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="secondPhone">
                <el-input type="text" v-model="form.secondPhone" placeholder="联系电话" clearable></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button v-on:click="form.dialogVisible = false">取 消</el-button>
            <el-button type="primary" v-on:click="save" v-bind:disabled="lock">确 定</el-button>
        </span>
    </el-dialog>
</div>

@section scripts{
    <script type="text/javascript">
        var vue = new Vue({
            el: "#app",
            data: {
                table: {
                    height: 450,
                    rows: [],
                    args: { phone: "", realName: "" },
                    page: { total: 0, pageIndex: 1, pageSize: global_config.page.pageSize, layout: global_config.page.layout }
                },
                checkedIds: [],
                form: {
                    dialogVisible: false,
                    id: 0,
                    url: '',
                    realName: '',
                    phone: '',
                    secondPhone: ''
                },
                formRule: {
                    phone: [{ required: true, message: '请输入电话', trigger: 'blur' }, { pattern: /^1[3456789]\d{9}$/, message: '电话号码错误' }],
                    realName: [{ required: true, message: '请输入真实姓名', trigger: 'blur' }],
                    sencondPhone: [{ pattern: /^1[3456789]\d{9}$/, message: '电话号码错误', trigger: 'blur' }]
                },
                lock: false

            },
            methods: {
                onSelectionChange: function (selection) {
                    var $this = this;
                    this.checkedIds = [];
                    selection.forEach(function (row) {
                        $this.checkedIds.push(row.Id);
                    });
                },
                onPageChange: function (page) {
                    this.table.page.pageIndex = page;
                    this.loadData();
                },
                onPageSizeChange: function (pageSize) {
                    this.table.page.pageSize = pageSize;
                    this.loadData();
                },
                loadData: function () {
                    var $this = this;
                    var data = Object.assign({}, this.table.page, this.table.args);
                    $.get("/Member/LoadData", data, function (result) {
                        if (result.success) {
                            $this.table.rows = result.data;
                            $this.table.page.total = result.total;
                        } else {
                            $this.$message.error(result.error);
                        }
                    }, "Json");
                },
                dateCellFormatter: function (row, column, cellValue, index) {
                    return cellValue.toDate().format("yyyy-MM-dd hh:mm");
                },
                editRow: function (row) {
                    window.location = "/Member/Edit?id=" + row.Id;
                },
                create: function () {
                    this.form.dialogVisible = true;
                    this.form.url = "/Member/Create";
                    this.form.id = 0;
                    this.form.phone = '';
                    this.form.secondPhone = '';
                    this.form.realName = '';
                },
                edit: function (row) {
                    this.form.dialogVisible = true;
                    this.form.url = "/Member/Edit";
                    this.form.id = row.Id;
                    this.form.phone = row.Phone;
                    this.form.secondPhone = row.SecondPhone;
                    this.form.realName = row.RealName;

                },
                save: function () {
                    var _self = this;
                    _self.lock = true;
                    _self.$refs.form.validate(function (valid) {
                        if (!valid) return false;
                        $.ajax({
                            method: "POST",
                            url: _self.form.url,
                            contentType: 'application/json',
                            data: JSON.stringify(_self.form),
                            success: function (result) {
                                _self.form.dialogVisible = false;
                                _self.lock = false;
                                if (result.success) {
                                    _self.$message.success({
                                        message: "保存成功！"
                                    });
                                    _self.loadData();
                                }
                                else {
                                    _self.$message.error(result.error);
                                }
                            }
                        });
                    });
                },
                addTopMember: function (row) {
                    var _self = this;
                    this.$confirm('将此会员升级为顶级分销会员,升级之后不能撤销，请确认后操作?', '升级顶级分销会员', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                       
                    $.post("/Member/AddTopMember", { memberId: row.Id }, function (result) {
                        if (result.success) {
                            _self.$message.success({
                                message: "升级成功！"
                            });
                        }
                        else {
                              _self.$message.error(result.error);
                        }
                    }, "json");
                    }).catch(() => {
    
                    });
                }
            },
            created: function () {
                setListPage(this.table, 224);
                this.loadData();
            }
        });
    </script>
}


